<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易商城首页</title>
    <link rel="stylesheet" href="../css/css/style.css">
    <style>
        body { background: #f5f5f5; }
        .banner { width: 100%; height: 260px; position: relative; overflow: hidden; margin-bottom: 20px; background: #000; }
        .carousel { position: relative; width: 100%; height: 260px; overflow: hidden; border-radius: 10px; }
        .carousel-img {
            width: 100%; height: 100%; object-fit: cover;
            position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.6s; z-index: 1;
        }
        .carousel-img.active {
            opacity: 1;
            z-index: 2;
            display: block;
        }
        .carousel-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(0,0,0,0.3); color: #fff; border: none; font-size: 28px;
            width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10;
        }
        .carousel-btn.left { left: 20px; }
        .carousel-btn.right { right: 20px; }
        .carousel-btn:hover { background: rgba(0,0,0,0.6); }
        .container { width: 1200px; margin: 0 auto; display: flex; }
        .sidebar { width: 200px; background: #fff; border-radius: 6px; margin-right: 20px; padding: 15px 0; }
        .sidebar h3 { font-size: 16px; margin: 0 0 10px 20px; }
        .sidebar ul { list-style: none; padding: 0 20px; }
        .sidebar li { margin: 10px 0; }
        .sidebar a { color: #333; text-decoration: none; }
        .sidebar a:hover { color: #e4393c; }
        .main-content { flex: 1; }
        .search-bar { display: flex; margin-bottom: 20px; }
        #searchInput { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; }
        #searchBtn { padding: 8px 16px; border: none; background: #e4393c; color: #fff; border-radius: 0 4px 4px 0; cursor: pointer; }
        .product-list { display: flex; flex-wrap: wrap; gap: 20px; }
        .product-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px #eee; width: 220px; padding: 15px; text-align: center; }
        .product-card img { width: 120px; height: 120px; object-fit: contain; }
        .product-card h3 { font-size: 16px; margin: 10px 0 5px; }
        .product-card p { color: #e4393c; font-weight: bold; }
        .product-card button { margin: 5px 2px; padding: 6px 12px; border: none; background: #e4393c; color: #fff; border-radius: 4px; cursor: pointer; }
        .product-card button:hover { background: #b7271e; }
        footer { margin-top: 40px; }
        @media (max-width: 1300px) {
            .container { width: 98%; }
        }
        @media (max-width: 900px) {
            .container { flex-direction: column; }
            .sidebar { width: 100%; margin: 0 0 20px 0; }
            .main-content { width: 100%; }
            .product-list { justify-content: center; }
        }
    </style>
</head>
<body>
    <header>
        <h1 style="margin:0;">简易商城</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="pages/login.html" id="loginLink">登录</a>
            <a href="pages/register.html" id="registerLink">注册</a>
            <a href="pages/cart.html">购物车</a>
            <a href="pages/profile.html" id="profileLink" style="display:none;">个人中心</a>
            <span id="welcomeUser"></span>
            <a href="#" id="logoutBtn" style="display:none;">退出</a>
        </nav>
    </header>
    <div class="banner">
        <div class="carousel" id="carousel">
            <img src="images/banners/banner1.jpg" class="carousel-img active">
            <img src="images/banners/banner2.jpg" class="carousel-img">
            <img src="images/banners/banner3.jpg" class="carousel-img">
            <button class="carousel-btn left" id="carouselPrev">&#10094;</button>
            <button class="carousel-btn right" id="carouselNext">&#10095;</button>
        </div>
    </div>
    <div class="container">
        <aside class="sidebar">
            <h3>商品分类</h3>
            <ul>
                <li><a href="#" onclick="filterCategory('全部');return false;">全部</a></li>
                <li><a href="#" onclick="filterCategory('电子产品');return false;">电子产品</a></li>
                <li><a href="#" onclick="filterCategory('服装');return false;">服装</a></li>
            </ul>
        </aside>
        <section class="main-content">
            <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索商品...">
                <button id="searchBtn">搜索</button>
            </div>
            <div class="product-list" id="productList"></div>
        </section>
    </div>
    <footer>
        <p>学号：23215220318 姓名：徐志鹏</p>
    </footer>
    <script src="js/utils.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/main.js"></script>
    <script>
    let carouselIndex = 0;
    const imgs = document.querySelectorAll('.carousel-img');
    const total = imgs.length;
    function showCarousel(idx) {
        imgs.forEach((img, i) => img.classList.toggle('active', i === idx));
    }
    function nextCarousel() {
        carouselIndex = (carouselIndex + 1) % total;
        showCarousel(carouselIndex);
    }
    function prevCarousel() {
        carouselIndex = (carouselIndex - 1 + total) % total;
        showCarousel(carouselIndex);
    }
    document.getElementById('carouselNext').onclick = nextCarousel;
    document.getElementById('carouselPrev').onclick = prevCarousel;
    let carouselTimer = setInterval(nextCarousel, 3000);
    document.getElementById('carousel').onmouseenter = () => clearInterval(carouselTimer);
    document.getElementById('carousel').onmouseleave = () => carouselTimer = setInterval(nextCarousel, 3000);
    showCarousel(carouselIndex);
    </script>
</body>
</html>